<template>
   <div class="bottom">
    <p>总购买数量:{{totalNum}} </p>
    <p>
      <button class="pay">去结算</button>
      <button class="clear" @click="clearCart">清空购物车</button>
      <button class="clear_select" @click="delAllSelect">删除所有已选中</button>
      <button class="list">返回列表页</button>
    </p>
    <p>
      总价格 : ￥ <span>{{totalPrice}}</span>
    </p>
  </div>
</template>

<script>

export default{
   name:"CartFooter",
   props: ["list"],

   //方法
   methods:{
    //清空购物车-----不要直接操作props过来的数据，而是通知数据的源头app 要清空你的数据
    clearCart(){
      //把事件传给父组件，父组件接收 并有自定义事件去执行对应的操作方法
      this.$emit("clearCart")
    },

    //删除所有已选中
    delAllSelect(){
      this.$emit("delAllSelect")

    }
   },


   //计算属性
   computed:{
    //总数量----计算的都是选中的，要判断select为true
    totalNum(){
      //数组过滤，符合条件的item留下 select为true选中状态，形成新的数组。然后reduce进行叠加累计，初始值为0，item的buy_num相加赋值给prev，返回相加的和
      return this.list.filter((item)=>item.select).reduce((prev,item)=>(prev+=item.buy_num),0)

    },

    //总价格----数组过滤filter，再进行reduce叠加累计得出数值，返回该数值
    totalPrice(){
      return this.list.filter((item)=>item.select).reduce((prev,item)=>(prev+=item.buy_num*item.price),0)
    },

   },

};

</script>

<style>
.bottom {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: pink;
 
}
.bottom > p {
  font-size: 20px;
}

.bottom > p > button {
  font-size: 20px;
  padding: 3px 10px;
  cursor: pointer;
  color: #fff;
}

.bottom > p > button.pay {
  background-color: green;
}

.bottom > p > button.clear {
  background-color: red;
}

.bottom > p > button.clear_select {
  background-color: orange;
}

.bottom > p > button.list {
  background-color: skyblue;
}

.bottom > p > span {
  color: red;
}
</style>
